<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <style>
        /* 设置整个页面居中对齐和背景图片 */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            flex-direction: column; /* 垂直居中排列元素 */
            background-image: url("/static/radiologist.jpg");
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            color: #333; /* 默认字体颜色 */
        }

        .table-container {
            text-align: center;
            background-color: rgba(255, 255, 255, 0.8); /* 白色背景，带透明度 */
            padding: 20px;
            border-radius: 10px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            border-radius: 10px;
            overflow: hidden; /* 防止圆角溢出 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
        }

        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: center;
        }

        th {
            background-color: #007BFF;
            color: #fff;
        }

        td {
            background-color: #fff;
        }

        .delete-button, .edit-button, .save-button, .add-button {
            background-color: #FF0000;
            color: #fff;
            border: none;
            cursor: pointer;
            padding: 10px 20px;
            border-radius: 5px;
            margin: 5px;
            font-size: 14px;
        }

        .save-button {
            background-color: #4CAF50;
            display: none; /* 默认隐藏保存按钮 */
        }

        .add-button {
            background-color: #4CAF50;
            margin-bottom: 20px; /* 调整按钮与表格之间的距离 */
        }

        .edit-input {
            display: none;
            padding: 8px;
            border-radius: 5px;
            border: 1px solid #ddd;
        }

        /* 模态框样式 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        /* 模态框内容样式 */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
        }

        /* 关闭按钮样式 */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* 按钮之间的间距 */
        .button-space {
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div class="table-container">
    <h1>用户管理</h1>
</div>
<button class="add-button" onclick="showAddUserModal()">新增用户</button> <!-- 调整按钮位置 -->
<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>权限</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="userTableBody">
    <tr>
        <td>张三</td>
        <td class="permission">放射科医生</td>
        <td>
            <button class="delete-button" onclick="deleteRow(this)">删除</button>
            <span class="button-space"></span>
            <button class="edit-button" onclick="editPermission(this)">修改</button>
            <input type="text" class="edit-input">
            <button class="save-button" onclick="savePermission(this)">保存</button>
        </td>
    </tr>
    <tr>
        <td>李四</td>
        <td class="permission">门诊部医生</td>
        <td>
            <button class="delete-button" onclick="deleteRow(this)">删除</button>
            <span class="button-space"></span>
            <button class="edit-button" onclick="editPermission(this)">修改</button>
            <input type="text" class="edit-input">
            <button class="save-button" onclick="savePermission(this)">保存</button>
        </td>
    </tr>
    </tbody>
</table>

<div id="addUserModal" class="modal">
    <div class="modal-content">
        <!-- 关闭按钮 -->
        <span class="close" onclick="closeAddUserModal()">&times;</span>
        <h2>新增用户</h2>
        <label for="newUserName">姓名:</label>
        <input type="text" id="newUserName"><br>
        <label for="newUserPermission">权限:</label>
        <input type="text" id="newUserPermission"><br>
        <button onclick="addUser()">保存</button>
    </div>
</div>

<script>
    let currentEditRow = null; // 保存当前编辑的行元素

    // 删除行
    function deleteRow(button) {
        const row = button.closest("tr");
        row.parentNode.removeChild(row);
    }

    // 编辑权限
    function editPermission(button) {
        const row = button.closest("tr");
        const permissionCell = row.querySelector('.permission');
        const editInput = row.querySelector('.edit-input');
        const saveButton = row.querySelector('.save-button');

        editInput.value = permissionCell.textContent; // 将当前权限值填入输入框
        permissionCell.style.display = 'none';
        editInput.style.display = 'inline-block';
        saveButton.style.display = 'inline-block';
        button.style.display = 'none'; // 隐藏修改按钮
        currentEditRow = row; // 设置当前编辑的行
    }

    // 保存权限
    function savePermission(button) {
        const row = button.closest("tr");
        const permissionCell = row.querySelector('.permission');
        const editInput = row.querySelector('.edit-input');
        const editButton = row.querySelector('.edit-button');

        permissionCell.textContent = editInput.value;

        permissionCell.style.display = 'block';
        editInput.style.display = 'none';
        button.style.display = 'none'; // 隐藏保存按钮
        editButton.style.display = 'inline-block'; // 显示修改按钮
        currentEditRow = null; // 重置当前编辑的行
    }

    // 显示新增用户模态框
    function showAddUserModal() {
        const addUserModal = document.getElementById('addUserModal');
        addUserModal.style.display = 'block';
    }

    // 关闭新增用户模态框
    function closeAddUserModal() {
        const addUserModal = document.getElementById('addUserModal');
        addUserModal.style.display = 'none';
    }

    // 添加用户
    function addUser() {
        const newUserName = document.getElementById('newUserName').value;
        const newUserPermission = document.getElementById('newUserPermission').value;
        const tableBody = document.getElementById("userTableBody");
        const newRow = document.createElement("tr");

        const newNameCell = document.createElement("td");
        const newPermissionCell = document.createElement("td");
        const newActionCell = document.createElement("td");

        newNameCell.textContent = newUserName;
        newPermissionCell.textContent = newUserPermission;
        newPermissionCell.className = 'permission';

        const deleteButton = document.createElement("button");
        deleteButton.className = "delete-button";
        deleteButton.textContent = "删除";
        deleteButton.onclick = function() {
            deleteRow(deleteButton);
        };

        const editButton = document.createElement("button");
        editButton.className = "edit-button";
        editButton.textContent = "修改";
        editButton.onclick = function() {
            editPermission(editButton);
        };

        const editInput = document.createElement("input");
        editInput.type = "text";
        editInput.className = "edit-input";
        editInput.style.display = "none";

        const saveButton = document.createElement("button");
        saveButton.className = "save-button";
        saveButton.textContent = "保存";
        saveButton.style.display = "none";
        saveButton.onclick = function() {
            savePermission(saveButton);
        };

        newActionCell.appendChild(deleteButton);
        newActionCell.appendChild(document.createTextNode(' ')); // 添加空白元素
        newActionCell.appendChild(editButton);
        newActionCell.appendChild(editInput);
        newActionCell.appendChild(saveButton);

        newRow.appendChild(newNameCell);
        newRow.appendChild(newPermissionCell);
        newRow.appendChild(newActionCell);

        tableBody.appendChild(newRow);

        // 清空输入框
        document.getElementById('newUserName').value = '';
        document.getElementById('newUserPermission').value = '';

        // 关闭新增用户模态框
        closeAddUserModal();
    }

    // 关闭模态框，当用户点击模态框外的区域时
    window.onclick = function(event) {
        const addUserModal = document.getElementById('addUserModal');
        if (event.target === addUserModal) {
            closeAddUserModal();
        }
    }
</script>
</body>
</html>